<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动态调整过渡动画</title>
  <style>
    /* 全局样式 */
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background: linear-gradient(135deg, hsl(180, 60%, 85%), hsl(340, 70%, 85%));
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* 用户头像容器 */
    .avatar-container {
      position: relative;
      display: inline-block;
      cursor: pointer;
    }

    /* 用户头像 */
    .avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: url('https://via.placeholder.com/50') no-repeat center/cover;
      border: 2px solid #fff;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

    /* 下拉菜单 */
    .dropdown-menu {
      position: absolute;
      top: 60px; /* 距离头像下方 10px */
      right: 0;
      width: 200px;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px); /* 毛玻璃效果 */
      border-radius: 10px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
      overflow: hidden;
      transform: translateY(-10px); /* 初始位置偏移 */
      opacity: 0; /* 初始透明度为 0 */
      visibility: hidden; /* 隐藏菜单 */
      transition: all var(--duration) var(--timing-function); /* 动态调整 */
    }

    /* 下拉菜单显示状态 */
    .dropdown-menu.active {
      transform: translateY(0); /* 移动到目标位置 */
      opacity: 1; /* 完全可见 */
      visibility: visible; /* 显示菜单 */
    }

    /* 菜单项 */
    .dropdown-menu li {
      list-style: none;
      padding: 12px 20px;
      cursor: pointer;
      transition: background 0.3s ease;
    }

    .dropdown-menu li:hover {
      background: rgba(0, 0, 0, 0.1);
    }

    /* 动态配置菜单 */
    .config-menu {
      position: absolute;
      top: 20px;
      left: 20px;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      border-radius: 10px;
      padding: 20px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
      color: white;
      font-size: 14px;
      line-height: 1.6;
      max-width: 300px;
    }

    .config-menu label {
      display: block;
      margin-bottom: 20px;
    }

    .config-menu .label-text {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 5px;
    }

    .config-menu input[type="range"] {
      width: 100%;
    }

    .config-menu .value-display {
      font-size: 12px;
      color: #ccc;
    }
  </style>
</head>
<body>
  <!-- 用户头像和下拉菜单 -->
  <div class="avatar-container" id="avatarContainer">
    <div class="avatar"></div>
    <ul class="dropdown-menu" id="dropdownMenu">
      <li>个人资料</li>
      <li>设置</li>
      <li>退出登录</li>
    </ul>
  </div>

  <!-- 动态配置菜单 -->
  <div class="config-menu">
    <h3>动画参数配置</h3>

    <!-- 动画持续时间 -->
    <label>
      <div class="label-text">
        动画持续时间 (秒)
        <span class="value-display" id="duration-value">0.3</span>
      </div>
      <input type="range" id="duration" min="0.1" max="2" step="0.1" value="0.3">
    </label>

    <!-- 动画延迟 -->
    <label>
      <div class="label-text">
        动画延迟 (秒)
        <span class="value-display" id="delay-value">0</span>
      </div>
      <input type="range" id="delay" min="0" max="1" step="0.1" value="0">
    </label>

    <!-- 缓动函数 -->
    <label>
      <div class="label-text">
        缓动函数
        <span class="value-display" id="timing-function-value">ease</span>
      </div>
      <select id="timing-function">
        <option value="ease">ease</option>
        <option value="linear">linear</option>
        <option value="ease-in">ease-in</option>
        <option value="ease-out">ease-out</option>
        <option value="ease-in-out">ease-in-out</option>
      </select>
    </label>
  </div>

  <script>
    // 获取 DOM 元素
    const avatarContainer = document.getElementById('avatarContainer');
    const dropdownMenu = document.getElementById('dropdownMenu');
    const durationInput = document.getElementById('duration');
    const delayInput = document.getElementById('delay');
    const timingFunctionSelect = document.getElementById('timing-function');

    // 显示当前值的元素
    const durationValueDisplay = document.getElementById('duration-value');
    const delayValueDisplay = document.getElementById('delay-value');
    const timingFunctionValueDisplay = document.getElementById('timing-function-value');

    // 更新动画参数
    function updateAnimationParams() {
      const duration = durationInput.value;
      const delay = delayInput.value;
      const timingFunction = timingFunctionSelect.value;

      // 设置 CSS 变量
      dropdownMenu.style.setProperty('--duration', `${duration}s`);
      dropdownMenu.style.setProperty('--delay', `${delay}s`);
      dropdownMenu.style.setProperty('--timing-function', timingFunction);

      // 更新显示值
      durationValueDisplay.textContent = duration;
      delayValueDisplay.textContent = delay;
      timingFunctionValueDisplay.textContent = timingFunction;
    }

    // 初始化动画参数
    updateAnimationParams();

    // 监听动画参数的变化
    durationInput.addEventListener('input', updateAnimationParams);
    delayInput.addEventListener('input', updateAnimationParams);
    timingFunctionSelect.addEventListener('change', updateAnimationParams);

    // 点击头像切换菜单显示状态
    avatarContainer.addEventListener('click', () => {
      dropdownMenu.classList.toggle('active');
    });

    // 点击页面其他区域关闭菜单
    document.addEventListener('click', (event) => {
      if (!avatarContainer.contains(event.target)) {
        dropdownMenu.classList.remove('active');
      }
    });
  </script>
</body>
</html>
